<template>
  <div class="app-container">
    <div class="table-container">
      <!-- 搜索 -->
      <el-row class="filter-container no-select">
        <!-- 简单搜索 -->
        <el-col :span="24" class="simple-filter">
          <!-- 按钮功能区 -->
          <el-button plain type="danger" icon="el-icon-delete" :disabled="filters.selectNumber <= 0">删除</el-button>
          <el-button plain type="danger" icon="el-icon-delete">清空</el-button>
          <el-button plain type="warning" icon="el-icon-download">导出</el-button>

          <!-- 简单搜索框区 -->
          <div class="simple-search">
            <el-input v-model="filters.data.searchText" class="input-with-select" placeholder="请输入内容">
              <el-button slot="append" icon="el-icon-search" title="搜索" @click="onFilterSearch" />
            </el-input>

            <el-button type="primary" @click="showComplexFilter">高级搜索<i class="el-icon-zoom-in el-icon--right" /></el-button>

            <!-- 刷新 -->
            <el-button plain type="info" icon="el-icon-refresh" title="刷新" />
          </div>
        </el-col>
        <!-- 高级搜索 -->
        <el-col v-if="filters.isComplex" :span="24" class="complex-filter">
          <el-collapse-transition>
            <el-form :ref="filters.formRef" :model="filters.data.criteria" label-width="100px" class="pane">
              <el-row :gutter="10">
                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item label="系统模块" prop="username">
                    <el-input v-model="filters.data.criteria.username" placeholder="请输入系统模块" />
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item label="操作用户" prop="ip">
                    <el-input v-model="filters.data.criteria.ip" placeholder="请输入操作用户" />
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item label="操作状态" prop="status">
                    <el-select v-model="filters.data.criteria.status" clearable placeholder="请选择操作状态">
                      <el-option label="成功" value="shanghai" />
                      <el-option label="失败" value="beijing" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="5">
                  <el-form-item label="操作时间" prop="created_at">
                    <el-date-picker v-model="filters.data.criteria.created_at" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                  </el-form-item>
                </el-col>

                <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">
                  <el-form-item no-label class="no-label">
                    <el-button @click="resetComplexForm">重置条件</el-button>
                    <el-button type="primary" @click="onFilterSearch">搜索</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-collapse-transition>
        </el-col>
      </el-row>

      <!-- 数据表格 -->
      <el-table :data="tableData" border class="filter-table" height="calc(100vh - 302px)" @selection-change="selectionChange">
        <el-table-column type="selection" align="center" width="40" />

        <el-table-column prop="id" label="ID" align="center" width="80" />

        <el-table-column prop="username" label="系统模块" width="120" />

        <el-table-column prop="ip" label="操作类型" />

        <el-table-column prop="address" :show-overflow-tooltip="true" label="请求方式" />

        <el-table-column prop="ip" label="操作用户" />

        <el-table-column prop="address" :show-overflow-tooltip="true" label="操作IP" />

        <el-table-column prop="address" :show-overflow-tooltip="true" label="操作地点" />

        <el-table-column prop="ip" label="登录状态" />

        <el-table-column prop="address" :show-overflow-tooltip="true" label="操作信息" />

        <el-table-column prop="date" label="操作时间" align="center" width="152" />

        <el-table-column fixed="right" label="操作" align="center" width="70">
          <template>
            <el-button type="text" icon="el-icon-document" size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格分页 -->
      <div class="filter-pagination no-select">
        <div v-show="filters.selectNumber > 0" class="select-text">共选择了<span class="number">{{ filters.selectNumber }}</span>条数据!</div>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { notEmpty } from '@/utils/validate'
import { saveLStorage, getLStorage, MD5 } from '@/utils/index'

export default {
  name: 'Operation'
  , data() {
    return {
      filters: {
        isComplex: false
        , formRef: ''
        , selectNumber: 0
        , data: {
          searchText: ''
          , criteria: {
            username: ''
            , ip: ''
            , status: ''
            , created_at: ''
          }
        }
      }
      , currentPage4: 4
      , tableData: [
        {
          id: 1
          , date: '2016-05-03 21:38:35'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 2
          , date: '2016-05-02 21:38:35'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 3
          , date: '2016-05-04 21:38:35'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 4
          , date: '2016-05-01 21:38:35'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 5
          , date: '2016-05-08'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 6
          , date: '2016-05-06'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 7
          , date: '2016-05-07'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 12
          , date: '2016-05-02'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 13
          , date: '2016-05-04'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 14
          , date: '2016-05-01'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 15
          , date: '2016-05-08'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 16
          , date: '2016-05-06'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }, {
          id: 17
          , date: '2016-05-07'
          , name: '王小虎'
          , province: '上海'
          , city: '普陀区'
          , address: '上海市普陀区金沙江路 1518 弄'
          , zip: 200333
        }
      ]
    }
  }
  , created() {
    // 设置表单ref
    this.filters.formRef = this.getIsComplexFiltersKey()
    // 加载是否展示高级搜索
    var isComplex = getLStorage(this.filters.formRef)
    if (notEmpty(isComplex)) {
      this.filters.isComplex = isComplex
    }
  }
  , methods: {
    getList() {

    }
    , onFilterSearch() {
      console.log('submit:', this.filters.isComplex)
    }
    , handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    }
    , handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }

    // 表格数据选择
    , selectionChange(val) {
      // 更新选择数量
      this.filters.selectNumber = notEmpty(val) ? val.length : 0
    }

    // 展示/隐藏高级搜索
    , showComplexFilter() {
      this.filters.isComplex = !this.filters.isComplex
      saveLStorage(this.filters.formRef, this.filters.isComplex)
      // 隐藏时重置表单
      if (!this.filters.isComplex) {
        this.resetComplexForm()
      }
    }

    // 重置高级搜索表单
    , resetComplexForm() {
      this.$refs[this.filters.formRef].resetFields()
    }

    , getIsComplexFiltersKey() {
      return MD5(this.$route.path + this.$options.name)
    }
  }
}
</script>

<style lang="scss">
  .app-main{
    background-color: #f2f2f2;

    .table-container {
      .filter-table {
        .el-table__header th{
          background: #f2f2f2;
        }

        .el-table__header tr th:nth-last-child(2),
        .el-table__body .el-table__row td:last-child{
          border-right-width: 0;
        }

        .el-table__body td.el-table-column--selection .cell{
          padding-right: 0.625rem;
        }
      }

      .filter-pagination {
        .el-pagination {
          .btn-prev,
          .btn-next,
          .el-pager li{
            background-color: transparent;
          }
        }
      }
    }
  }
</style>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  $bg: #fff;
  $space: 0.625rem;

  .table-container {
    background-color: $bg;
    border: 1px solid $--border-color-light;
    border-radius: 4px;
    overflow: hidden;

    .filter-container{
      background-color: $bg;
      padding: 0;

      .simple-filter {
        padding: $space;
        position: relative;
        .simple-search{
          position: absolute;
          right: $space;
          top: $space;
          .input-with-select{
            width: 13.75rem;
            margin-right: $space;
          }
        }
      }

      .complex-filter{
        padding: $space $space 0 $space;
        border-top: 1px solid $--border-color-light;
        .el-form-item{
          margin-bottom: $space;
        }
      }
    }

    .filter-table {
      border-left-width: 0;

      &::after,
      &::before {
        background-color: transparent;
      }
    }

    .filter-pagination {
      $elPaginationHeight: 32px;
      $paginationHeight: 40px;

      position: relative;
      height: $paginationHeight;
      line-height: $paginationHeight;
      padding: 0 $space;
      font-size: 13px;
      background-color: #fafafa;
      color: #606266;
      border-top: 1px solid $--border-color-light;

      .select-text .number {
        color: red;
        padding: 0 calc(#{$space} / 2);
      }

      .el-pagination {
        position: absolute;
        height: $elPaginationHeight;
        line-height: $elPaginationHeight;
        right: $space;
        top: 0;
        margin: calc((#{$paginationHeight} - #{$elPaginationHeight}) / 2) 0;
      }
    }
  }
</style>
